<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('主题列表')"/>
</head>
<body>
<div class="container">
    <th:block th:include="include :: navigate('主题列表','关 闭','index')"/>


    <div class="row btn-group-sm" id="toolbar" role="group">
        <div class="col-xs-8">
            <a class="btn btn-success btn-sm disabled" id="add-btn">
                <i class="fa fa-plus"></i> 添加
            </a>
            <a class="btn btn-primary btn-sm disabled" id="modify-btn">
                <i class="fa fa-edit"></i> 修改
            </a>
            <a class="btn btn-danger btn-sm disabled" id="delete-btn">
                <i class="fa fa-remove"></i> 删除
            </a>
        </div>
        <div class="col-xs-4 text-right">
            <button class="page-btn" onclick="clickPage('up')">&laquo;</button>
            <span id="total"></span>
            <button class="page-btn" onclick="clickPage('down')">&raquo;</button>
        </div>
    </div>


    <div class="pt-2">
        <table class="table table-hover table-sm">
            <thead class="thead-light">
            <tr>
                <th scope="col" width="35">

                </th>
                <th scope="col">标题</th>
            </tr>
            </thead>

            <tbody id="subjectTale"></tbody>
        </table>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script>
    var id = undefined;
    var token = window.token
    var pageNum = 1, pageSize = 10, total = 0, pages = 0

    var listSubject = "/backend/subject/listSubject"
    var addSubjectDetail = "/backend/addSubjectDetail"
    var modifySubject = "/backend/modifySubject"
    var deleteSubject = "/backend/subject/deleteSubject"

    $(function () {
        $("#add-btn").click(function (){
            window.location.href = addSubjectDetail + "/" + id+"?token=" + encodeURIComponent(token)
            //前往添加主题详情页面
        })

        $("#modify-btn").click(function () {
            window.location.href = modifySubject + "/" + id+"?token=" + encodeURIComponent(token)
        })

        $("#delete-btn").click(function () {
            deleteAjax(deleteSubject + "/" + id,{}, function (response) {
                if (response.code == 0) {
                    loadListSubject()
                    cocoMessage.success("删除成功！")
                }
            })
        })

        loadListSubject()
    })

    /**
     * 加载主题列表
     */
    function loadListSubject() {
        var data = {
            "pageNum": pageNum,
            "pageSize": pageSize,
        }
        getAjax(listSubject, data, function (response) {
            pageNum = response.data.pageNum
            pageSize = response.data.pageSize
            total = response.data.total
            pages = response.data.pages
            parseListSubject(response.data)
        })
    }

    /**
     * 解析主题列表
     * @param data
     */
    function parseListSubject(data) {
        var subjectHtml = ""
        $.each(data.list, function (index, item) {
            subjectHtml += "<tr>" +
                "<td class='text-center'><input type='checkbox' class='checkbox' onclick='clickCheckbox(this)' data-id='" + item.id + "'></td>" +
                "<td><span> " + item.title + "</span></td>" +
                "</tr>"
        })
        $("#subjectTale").html(subjectHtml)
        $("#total").text(pageNum + "/" + pages)
    }

    /**
     * 点击分页
     * @param type
     */
    function clickPage(type) {
        if (type == "up") {
            if (pageNum > 1) {
                pageNum--
                loadListSubject()
            }
        } else {
            if (pageNum < pages) {
                pageNum++
                loadListSubject()
            }
        }
    }

    /**
     * 点击复选框
     * @param op
     */
    function clickCheckbox(op) {
        // 如果当前复选框被选中
        if ($(op).is(':checked')) {
            // 取消所有其他同类别复选框的选中状态
            $('.checkbox').not(op).prop('checked', false);
            // 可以在这里添加更多操作，比如收集选中项的值等
            // 激活按钮
            $("#modify-btn, #delete-btn, #add-btn").removeClass("disabled")
            id = $(op).data("id")
        } else {
            // 如果所有复选框都未被选中，则禁用按钮
            if (!$('.checkbox:checked').length) {
                $("#modify-btn, #delete-btn, #add-btn").addClass("disabled")
            }
            id = undefined
        }
    }

</script>
</body>
</html>
